<template>
  <div>
    <!-- 文章分类 -->
    <el-card class="box-card">
      <!-- 文章分类表头 -->
      <div slot="header" class="clearfix">
        <span class="header-class">文章分类</span>
        <el-button style="float: right" type="primary" size="small"
        @click="addArticle"
          >添加分类</el-button>
      </div>
      <!-- 添加分类弹框 -->
        <el-dialog width="410px" title="添加分类" :visible.sync="dialogFormVisible">
          <el-form ref="classForm" :model="form" :rules="rules" hide-required-asterisk>
            <el-form-item label="分类名称" prop="cate_name" :label-width="formLabelWidth">
              <el-input v-model="form.cate_name" placeholder="请输入分类名称"></el-input>
            </el-form-item>
            <el-form-item label="分类别称" prop="cate_alias" :label-width="formLabelWidth">
              <el-input v-model="form.cate_alias" placeholder="请输入分类别称"></el-input>
            </el-form-item>
          </el-form>
          <div slot="footer" class="dialog-footer">
            <el-button type="primary" @click="addClass(type)">确 定</el-button>
            <el-button @click="dialogFormVisible = false">取 消</el-button>
          </div>
        </el-dialog>
      <!-- 表格区域 -->
      <el-table border style="width: 100%;" :data="list" >
        <el-table-column type="index" width="130" label="序号"></el-table-column>
        <!-- <el-table-column prop="date" label="序号" width="180"></el-table-column> -->
        <el-table-column prop="cate_name"  label="项目名称" width="450"></el-table-column>
        <el-table-column prop="cate_alias" label="分类别名" width="400"></el-table-column>
        <!-- 修改删除 -->
        <el-table-column label="操作"  width="200">
          <template slot-scope="scope">
            <el-button
              size="mini"
              type="primary"
              style="margin-left: 25px;"
              @click="change(scope.row.id)">修改</el-button>
            <el-button
              size="mini"
              type="danger"
              @click="dialogVisible = true">删除</el-button>
              <!-- 点击删除弹框 -->
              <el-dialog
                title="提示"
                :visible.sync="dialogVisible"
                width="30%">
                <span>确定删除吗？</span>
                <span slot="footer" class="dialog-footer">
                  <el-button @click="dialogVisible = false">取 消</el-button>
                  <el-button type="primary" @click="del(scope.row.id)">确 定</el-button>
                </span>
              </el-dialog>
          </template>
        </el-table-column>
      </el-table>
    </el-card>
  </div>
</template>

<script>
import { addArticleClass, delArticleClass, getArticleClass, getArticleDetail, updateArticle } from '@/api/user'
export default {
  name: 'ArticleClass',
  data () {
    return {
      list: [],
      dialogVisible: false,
      type: 1,
      // currentRow: null
      form: {
        cate_name: '',
        cate_alias: ''
      },
      rules: {
        cate_name: [{ required: true, message: '请输入分类名称', trigger: 'blur' }],
        cate_alias: [{ required: true, message: '请输入分类别称', trigger: 'blur' }]
      },
      formLabelWidth: '80px',
      dialogFormVisible: false
    }
  },
  async created () {
    this.initClass()
  },
  methods: {
    handleEdit (index, row) {
      console.log(index, row)
    },
    // 获取文章分类
    async initClass () {
      const res = await getArticleClass({
        cate_name: this.cate_name,
        cate_alias: this.cate_name
      })
      this.list = res.data
      // console.log(res)
      // console.log(this.list)
    },
    // 添加文章分类
    addArticle () {
      this.type = 1
      this.dialogFormVisible = true
    },
    // 添加文章分类
    async addClass () {
      try {
        // 校验表单
        const valid = await this.$refs.classForm.validate()
        if (valid) {
          // type为1.走添加请求
          if (this.type === 1) {
            // 发送请求
            await addArticleClass(this.form)
            // 添加提示
            this.$message.success('发布成功')
          }
          // type为2.走更新请求
          if (this.type === 2) {
            const { id, cate_name, cate_alias } = this.form
            await updateArticle({ id, cate_name, cate_alias })
            this.$message.success('修改成功')
          }
          this.$refs.classForm.resetFields()
          // 关闭弹窗
          this.dialogFormVisible = false
          // 重新渲染
          this.initClass()
        }
      } catch (e) {
        console.log(e)
      }
    },
    // 获取单个文章分类详情
    async change (id) {
      this.type = 2
      this.dialogFormVisible = true
      const res = await getArticleDetail(id)
      this.form = {
        ...res.data
      }
    },
    // 删除文章分类
    async del (id) {
      await delArticleClass(id)
      this.initClass()
      this.dialogVisible = false
    }
  }
}
</script>

<style lang="less" scoped>
.clearfix:before,
.clearfix:after {
  display: table;
  content: "";
}
.clearfix:after {
  clear: both;
}

.box-card {
  margin: 20px;
  .header-class {
    line-height: 32px;
    font-size: 16px;
  }
}
</style>
